<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>事件的绑定</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: wheat;
    font-size: 30px;
    /*文本透明*/
    /*text-decoration: none;*/
    font-family: "华文楷体";
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
  }

  p {
    font-size: 40px;
    font-weight: bold;
    background-color: white;
    cursor: pointer;
  }

  #box1 > div {
    width: 100px;
    height: 100px;
    background-color: #b3b1af;
    border: solid 1px black;
  }

  button {
    margin-top: 20px;
    font-size: 25px;
    width: 100px;
    height: 35px;
    background-color: #b3b1af;
    border: none;
    border-radius: 10%;
    box-shadow: black 0 0 5px;
    transition: linear 0.2s;
    z-index: 1;
  }
  #btn button{
    background-color: slategrey;
  }

  button:hover {
    background-color: pink;
    transform: scale(1.1);
    color: deeppink;
  }

</style>
<body id="body">
<div id="btn">
  <button class="button">Submit</button>
  <button class="button">Exit</button>
  <button class="button">cancel</button>
</div>
</body>
<script>
  var button=document.getElementById("btn")
  /*
    * button.onclick=function (event){}
       - 这种点击事件对同一个对象只能绑定一次  如果多次绑定会被后面绑定的覆盖
    * button.addEventListener("click",function (event){}
       - 这种点击事件对同一个对象可以多次绑定  从而产生不痛的效果
      -  attachEvent("onclick",function(event){} 适用于IE8
   * */

  // button.onclick=function (event){
  //   // 事件的委派
  //   if (event.target.tagName==="BUTTON"){
  //     alert("已点击——"+event.target.innerHTML)
  //   }
  // }

  button.addEventListener("click",function (event){
      if (event.target.tagName==="BUTTON"){
        alert("已点击——"+event.target.innerHTML)
      }
    },false)
  button.addEventListener("click",function (event){
    if (event.target.tagName==="BUTTON"){
      alert("已二次点击——"+event.target.innerHTML)
    }
  },false)
</script>
</html>